<template>
	<view class="list-card-container">
		<view class="list-card base" v-if="card.mode === 'base'" @click="to_article">
			<view class="card-img">
				<image :src="card.cover[0] ? card.cover[0] : '/static/img/logo.png'"
					mode="aspectFill" lazy-load></image>
			</view>
			<view class="card-content">
				<view class="card-title m-2">
					<text>{{card.title}}</text>
					<CollectBtn :article_id="card._id" />
				</view>
				<view class="card-desc">
					<view class="article-type">
						{{card.classify}}
					</view>
					<view class="browse-count">
						{{card.browse_count}}次浏览
					</view>
				</view>
			</view>
		</view>
		<view class="list-card column" v-else-if="card.mode==='column'" @click="to_article">
			<view class="card-title">
				<text>{{card.title}}</text>
				<CollectBtn :article_id="card._id" />
			</view>
			<view class="card-img m-2">
				<image v-for="(item,index) in card.cover.slice(0,3)" :key="index" :src="item"
					mode="aspectFill" lazy-load></image>
			</view>
			<view class="card-desc">
				<view class="article-type">
					{{card.classify}}
				</view>
				<view class="browse-count">
					{{card.browse_count}}次浏览
				</view>
			</view>
		</view>
		<view class="list-card image" v-else @click="to_article">
			<view class="card-img">
				<image :src="card.cover[0]" mode="aspectFill" lazy-load></image>
			</view>
			<view class="card-title m-2">
				<text>{{card.title}}</text>
				<CollectBtn :article_id="card._id" />
			</view>
			<view class="card-desc">
				<view class="article-type">
					{{card.classify}}
				</view>
				<view class="browse-count">
					{{card.browse_count}}次浏览
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ListCard",
		props: {
			card: Object
		},
		methods: {
			to_article() {
				uni.navigateTo({
					url: '/pages/article/article?id=' + this.card._id
				})
			}
		},
	}
</script>

<style lang="scss">
	.list-card-container {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 15rpx;
		box-shadow: 0 0 10rpx #999;

		.m-2 {
			margin: 20rpx 0;
		}

		.list-card {
			padding: 20rpx;
			@include flex(flex-start);

			.card-img {
				width: 130rpx;
				height: 130rpx;
				flex: 0 0 auto;

				image {
					border-radius: 15rpx;
					width: 100%;
					height: 100%;
				}
			}

			.card-content {
				margin-left: 20rpx;
				width: 100%;
			}

			.card-title {
				@include flex();
				width: 100%;

				text {
					color: #333;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					// 文字超过两行之后显示省略号
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.collect-btn-container {
					margin-left: 10rpx;
					flex: 0 0 auto;
				}
			}

			&.image {
				flex-direction: column;

				.card-img {
					width: 100%;
					height: 200rpx;
				}
			}

			&.column {
				flex-direction: column;

				.card-img {
					width: 100%;
					height: 140rpx;
					@include flex(space-around);

					image {
						flex-basis: 32%;
					}
				}
			}
		}

		.card-desc {
			width: 100%;
			@include flex(space-between);
			font-size: 24rpx;

			.article-type {
				border: 1px solid $base-color;
				border-radius: 30rpx;
				padding: 0 10rpx;
				color: $base-color;
			}

			.browse-count {
				color: #999;
			}
		}
	}
</style>
